<template>
	<view class="content">
		<sl-filter
			:ref="'slFilter'"
			:topFixed="true"
			:isTransNav="true"
			:navHeight="0"
			:color="titleColor"
			:themeColor="themeColor"
			:menuList="menuList"
			@result="result"
			@cityJS="cityJS"
		></sl-filter>
		<view class="item-list">
			<view class="shopItem" v-for="i in 30" :key="i">
				<view class="leftImg">
					
					<!--  #ifdef H5 -->
					<img width="100%" src="https://img1.tuhu.org/Images/Marketing/Shops/8fc4c0a6-3f7a-49df-a613-d502843f568c.jpg@140h_99q.webp" class="" />
					<!--  #endif -->
					<!--  #ifndef H5 -->
					<image style="width: 100%" src="https://img1.tuhu.org/Images/Marketing/Shops/8fc4c0a6-3f7a-49df-a613-d502843f568c.jpg@140h_99q.webp" mode="widthFix"></image>
					<!--  #endif -->
			
				</view>
				<view class="rightContainer">
					<view class="tcs_tatextt shopTitle" style="-webkit-line-clamp: 2;">途虎养车工场店（杭州景芳路店）</view>
					<view class="second-line">
						<view class="main-info">
							<view class="tcs_tatag shop-level"><span data-text="5级" class="tc_tag"></span></view>
							<view class="shop-rank">
								<span>评分</span>
								<span class="shop-num">4.99</span>
								<span class="split-line">|</span>
								<span>订单</span>
								<span class="shop-num">2630</span>
							</view>
						</view>
						<view class="shop-tag gcd"><span>工场店</span></view>
					</view>
					<view class="third-line">
						<view class="tcs_tatextt shop-area" style="-webkit-line-clamp: 1;">杭州市江干区景芳路24号</view>
					</view>
					<view class="forth-line noBottom">
						<span class="xhz"><span>星级门店</span></span>
						<span class="xhz"><span>虎式服务</span></span>
						<span class="xhz"><span>途虎直送</span></span>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
import slFilter from '@/components/sl-filter/sl-filter.vue';
export default {
	components: {
		slFilter,
		uniLoadMore
	},
	data() {
		return {
			loadingType: '0', //加载更多状态
			themeColor: '#000000',
			titleColor: '#666666',
			filterResult: '',
			menuList: [
				{
					title: '服务',
					key: 'salary',
					isMutiple: true,
					detailList: [
						{
							title: '不限',
							value: ''
						},
						{
							title: '换轮胎',
							value: '1'
						},
						{
							title: '修锁',
							value: '3'
						},
						{
							title: '换电瓶',
							value: '4'
						}
					]
				},
				{
					title: '排序',
					key: 'sort',
					isSort: true,
					reflexTitle: true,
					defaultSelectedIndex: 1,
					detailList: [
						{
							title: '默认排序',
							value: ''
						},
						{
							title: '离我最近',
							value: 'add_time'
						},
						{
							title: '安装最多',
							value: 'wages_up'
						}
					]
				}
			]
		};
	},
	onLoad() {},
	methods: {
		result(val) {
			console.log('filter_result:', val);
			this.filterResult = JSON.stringify(val, null, 2);
		},
		cityJS(val) {
			console.log('filter_result:', val);
		}
		
	},
	onReachBottom(options) {
		console.log('刷新数据:');
	}
};
</script>

<style>
	.uni-img{
		height: auto;
	}
.shopItem {
	width: 100%;
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
	padding-top: 0.8rem;
	-webkit-box-align: start;
	-webkit-align-items: flex-start;
	align-items: flex-start;
	padding-bottom: 0.65rem;
	border-bottom: 0.5px solid #eee;
}
.leftImg {
	width: 4.5rem;
	margin-left: 25upx;
	height: 80px;
}
.rightContainer {
	-webkit-box-flex: 1;
	-webkit-flex: 1;
	flex: 1;
	padding-left: 0.6rem;
	font-size: 0.6rem;
	color: #666;
}
.shopTitle {
	color: #333;
	font-size: 0.9rem;
	font-weight: 800;
	margin-top: -0.2rem;
	padding-right: 0.8rem;
	
}
.tcs_tatextt {
	text-overflow: -o-ellipsis-lastline;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 0;
	-webkit-box-orient: vertical;
	white-space: normal;
	word-break: break-all;
	word-wrap: break-word;
}
.second-line {
	width: 100%;
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
	overflow: hidden;
	padding-top: 0.1rem;
	-webkit-box-align: center;
	-webkit-align-items: center;
	align-items: center;
	padding-right: 0.8rem;
}
.third-line {
	width: 100%;
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
	margin-top: 0.2rem;
	padding-right: 0.8rem;
}
.forth-line.noBottom {
	padding-bottom: 0.1rem;
}
</style>
